<script lang='ts' setup>
import { reactive,onMounted,ref} from 'vue'
import { ArrowLeft, ShoppingCartFull } from '@element-plus/icons-vue' 

const props = withDefaults(defineProps<{
    setStatus: Function
}>(), {
    setStatus: (num: number) => {}
})
const state = reactive({
    tableData: [
        {
            id: 1,
            SKUID: 5645,
            brand: '格力'
        }
    ],
    programme: '',
    programmeList: [
        {value: 1, label: '方案1'}
    ],
    typeList: [] as Array<any>,
    brandList: [] as Array<any>,
    selectedOptions: [],
    param: {
        brand: '',
        keyword: '',
        type: ''
    }
})
const visible = ref(false)

const previewInfo = (id: number) => {

}

const search = () => {
    
} 
const closeShopCar = () => props.setStatus(1);
</script>

<template>
    <main class="shop-car-wrapper">
        <section class="flex-c-s">
            <h3>新增入库</h3>
            <el-button type="primary"  :icon="ArrowLeft" @click="closeShopCar">返回列表</el-button>
        </section>
        <section class="line"></section>
        <el-form :model="state.param"  label-width="100px">
            <el-row :gutter="35">
                <el-col :xs="22" :sm="22" :md="22" :lg="22" :xl="22">
                    <el-row :gutter="35">
                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="mb20">
                            <el-form-item label="商品品牌">
                                <el-select v-model="state.param.brand" placeholder="请选择商品品牌" class="w100">
                                    <el-option v-for="item in state.brandList" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>

                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="mb20">
                            <el-form-item label="类型">
                                <el-select v-model="state.param.type" placeholder="请选择类型" class="w100">
                                    <el-option v-for="item in state.typeList" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>

                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
                            <el-form-item label="输入搜索">
                                <el-input v-model="state.param.keyword" placeholder="商品ID/商品名称/名称首字母/条形码" clearable></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
                            <section class="">
                                <el-button type="primary" @click="search">搜 索</el-button>&emsp;
                                <el-badge :value="12" class="item">
                                    <el-button :icon="ShoppingCartFull">我的入库单</el-button>
                                </el-badge>
                            </section>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
        </el-form>
         
        <section>  
            <el-table :data="state.tableData" style="width: 100%" border>
				<el-table-column label="SKU-ID" prop="SKUID" />
				<el-table-column label="品牌" prop="brand" />
				<el-table-column label="商品名称" prop="orderPrice" />
				<el-table-column label="属性" prop="cellPrice" />
				<el-table-column label="规格" prop="buyCount"  />
				<el-table-column label="条形码" prop="buyCount"  />
				<el-table-column label="来源" prop="buyCount"  />
				<el-table-column label="零售价" prop="buyCount"  />
				<el-table-column label="现有库存" prop="buyCount"  />
				<el-table-column label="操作">
					<template #default="scope">
                        <el-button type="primary"  @click="previewInfo(scope.row)">入库</el-button> 
					</template>
				</el-table-column>
				
			</el-table>
        </section>
       
        <CardDialog v-model="visible"  />
    </main>
</template>

<style lang='scss' scoped>
.flex-c-s {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.line {
    background: #ededed;
    height: 1px;
    margin: 20px 0;
}
</style>